<template>
	<!-- 员工管理 -->
	<div>
		<headpage username="员工管理" routername="main1"></headpage>
		<ul class="list">
			<li>账号数1/1</li>
			<li>员工数:0/10</li>
		</ul>
		<div>
			<ul class="list2">
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-shoutuiche_"></use>
					</svg>
					添加微信付费账号
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-koushuijin"></use>
					</svg>
					添加手机账号
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-jimu"></use>
					</svg>
					添加免费账号<span style="font-size:10px;color:rgba(0,0,0,0.5)">(0/10)</span>
				</li>
			</ul>
		</div>
		
		<div class="foot">
			<p>购买账号数量</p>
		</div>
	</div>
</template>

<script>
	import headpage from"../headpage.vue"
	export default{
		name:"employee_management",
		components:{
			headpage
		}
	}
</script>

<style scoped="scoped">
	ul,li,p{
		margin:0;
		padding:0;
		list-style: none;
	}
	.list{
		display:flex;
		padding:10px;
		border-bottom:1px solid lightblue;
	}
	.list li{
		width:50%;
		text-align: center;
	}
	.list2{
		width:90%;
		margin:0 auto;
		left:0;
		right:0;
		margin-top:20px;
		border-top:1px solid lightblue;
	}
	.list2 li{
		border-bottom:1px solid lightblue;
		line-height:40px;
		text-align: left;
	}
	.icon {
	  width: 1em;
	  height: 1em;
	  vertical-align: -0.15em;
	  fill: currentColor;
	  overflow: hidden;
	}
	
	.foot{
		position:fixed;
		bottom:0;
		text-align: center;
		width:100%;
		line-height:40px;
		background-color:lightblue;
		color:white;
	}
</style>

